File
Metadata
| selector |
app-sidebar |
| styleUrls |
sidebar.component.scss |
| templateUrl |
./sidebar.component.html |
Methods
|
addExpandClass
|
addExpandClass(element: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
Description |
| element |
any
|
|
|
|
|
eventCalled
|
eventCalled()
|
|
|
|
|
|
isActive
|
isActive:
|
Default value : false
|
|
|
import { Component } from '@angular/core';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent {
isActive = false;
showMenu = '';
eventCalled() {
this.isActive = !this.isActive;
}
addExpandClass(element: any) {
if (element === this.showMenu) {
this.showMenu = '0';
} else {
this.showMenu = element;
}
}
}
<nav class="sidebar" [ngClass]="{sidebarPushRight: isActive}">
<ul class="list-group">
<a routerLink="/dashboard" [routerLinkActive]="['router-link-active']" class="list-group-item">
<i class="fa fa-fw fa-home"></i> {{ 'home' | translate }}
</a>
<div class="nested-menu">
<a class="list-group-item" (click)="addExpandClass('upload')">
<span>
<i class="fa fa-plus"></i> {{ 'analyze your text' | translate }}</span>
</a>
<li class="nested" [class.expand]="showMenu === 'upload'">
<ul class="submenu">
<li>
<a [routerLink]="['/text']" [routerLinkActive]="['router-link-active']" class="list-group-item">
<i class="fa fa-fw fa-keyboard-o"></i> {{ 'text' | translate }}
</a>
</li>
<li>
<a [routerLink]="['/doc']" [routerLinkActive]="['router-link-active']" class="list-group-item">
<i class="fa fa-fw fa-file-text"></i> {{ 'doc' | translate }}
</a>
</li>
<li>
<a [routerLink]="['/pdf']" [routerLinkActive]="['router-link-active']" class="list-group-item">
<i class="fa fa-fw fa-file-pdf-o"></i> {{ 'pdf' | translate }}
</a>
</li>
<li>
<a [routerLink]="['/image']" [routerLinkActive]="['router-link-active']" class="list-group-item">
<i class="fa fa-fw fa-picture-o"></i> {{ 'image' | translate }}
</a>
</li>
</ul>
</li>
</div>
<a routerLink="/dictionary" [routerLinkActive]="['router-link-active']" class="list-group-item">
<i class="fa fa-fw fa-list"></i> {{ 'school dictionary' | translate }}
</a>
</ul>
</nav>
Legend
Html element with directive